<template>
	<view class="content">
		<view v-for="(commodityObjectItem,indexa) in commodityObject" :key="indexa">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" indicator-color="#aaa"
			 indicator-active-color="#00449F" class="swiper">
				<swiper-item v-for="(swiper,index) in commodityObjectItem.TopSwiperList" :key="index">
					<image :src="swiper" mode="aspectFill" class="swiper-img"></image>
				</swiper-item>
			</swiper>
			<view class="bbt">
				<view class="header clear-both">
					<view class="header-l float-l"><text class="colorm fs24">¥{{commodityObjectItem.Package.DiscountPrice || commodityObjectItem.Package.UnitPrice}}</text><text
						 class="fs14 color9">/{{commodityObjectItem.Unit}}</text>
					</view>
					<button class="float-r text-center fex" open-type="share" v-show="isMpweixin">
						<image :src="moreicon" mode="aspectFill" class="header-img"></image>
						<view class="fs12 color9">分享</view>
					</button>
				</view>
				<view class="fs18 color3 font-weight cake-name"><text class="colorm ml" v-show="commodityObjectItem.IsFlash">【闪送】</text>{{commodityObjectItem.CommodityName}}</view>
				<view class="fs14 color9 cake-info">{{commodityObjectItem.Remarks}}</view>
				<!-- <view class="clear-both fs14 cake-ly">
				<view class="colorFF6 float-l">品牌来自：英国Callestick</view>
				<view class="color9 float-r">已售2000件</view>
			</view> -->
			</view>
			<view class="yhfw bbt">
				<view class="yhfw-item clear-both" v-show="commodityObjectItem.Title">
					<view class="yhfw-tag float-l colorFF6 fs12 font-weight">优惠</view>
					<view class="float-l fs14 color3">{{commodityObjectItem.Title}}</view>
					<!-- <image src="http://iph.href.lu/10x10" mode="aspectFill" class="float-r yhfw-img"></image> -->
				</view>
				<view class="yhfw-item clear-both bbn" v-show="serviceStr">
					<view class="yhfw-tag float-l colorFF6 fs12 font-weight">服务</view>
					<view class="float-l fs14 color3">{{serviceStr}}</view>
					<!-- <image src="http://iph.href.lu/10x10" mode="aspectFill" class="float-r yhfw-img"></image> -->
				</view>
			</view>
			<view class="yhfw bbt">
				<view class="yhfw-item clear-both bbn" v-show="commodityObjectItem.Title" @tap="openCartBox(commodityObjectItem)">
					<view class="float-l colorFF6 fs12 font-weight">请选择</view>
					<view class="float-l fs14 color3 mr2">请选择产品</view>
					<image src="/static/tabbar/index/enter.png" mode="aspectFill" class="float-r yhfw-img"></image>
				</view>
			</view>
			<view class="xgtj bbt" v-show="recommendCommdityList.length>0">
				<view class="xgtj-title clear-both">
					<view class="fs18 color3 font-weight float-l">相关推荐</view>
					<!-- <view class="fs14 color9 float-r">查看更多</view> -->
				</view>
				<swiper :indicator-dots="true" class="xgtj-swiper" indicator-color="#ccc" indicator-active-color="#999">
					<swiper-item>
						<view class="xgtj-item">
							<image src="http://rescs.bestcake.com/act/mrhappy/special1.png" mode="aspectFill" class="xgtj-img"></image>
							<view class="fs12 font-weight color3 xgtj-name">可莱思迪客 英国冰 淇淋125ml</view>
							<view class="clear-both">
								<text class="fs16 colorm">¥99</text>
								<text class="fs14 color9">/组</text>
							</view>
						</view>
						<view class="xgtj-item">
							<image src="http://rescs.bestcake.com/act/mrhappy/special1.png" mode="aspectFill" class="xgtj-img"></image>
							<view class="fs12 font-weight color3 xgtj-name">可莱思迪客 英国冰 淇淋125ml</view>
							<view class="clear-both">
								<text class="fs16 colorm">¥99</text>
								<text class="fs14 color9">/组</text>
							</view>
						</view>
						<view class="xgtj-item">
							<image src="http://rescs.bestcake.com/act/mrhappy/special1.png" mode="aspectFill" class="xgtj-img"></image>
							<view class="fs12 font-weight color3 xgtj-name">可莱思迪客 英国冰 淇淋125ml</view>
							<view class="clear-both">
								<text class="fs16 colorm">¥99</text>
								<text class="fs14 color9">/组</text>
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="xgtj-item">
							<image src="http://rescs.bestcake.com/act/mrhappy/special1.png" mode="aspectFill" class="xgtj-img"></image>
							<view class="fs12 font-weight color3 xgtj-name">可莱思迪客 英国冰 淇淋125ml</view>
							<view class="clear-both">
								<text class="fs16 colorm">¥99</text>
								<text class="fs14 color9">/组</text>
							</view>
						</view>
						<view class="xgtj-item">
							<image src="http://rescs.bestcake.com/act/mrhappy/special1.png" mode="aspectFill" class="xgtj-img"></image>
							<view class="fs12 font-weight color3 xgtj-name">可莱思迪客 英国冰 淇淋125ml</view>
							<view class="clear-both">
								<text class="fs16 colorm">¥99</text>
								<text class="fs14 color9">/组</text>
							</view>
						</view>
						<view class="xgtj-item">
							<image src="http://rescs.bestcake.com/act/mrhappy/special1.png" mode="aspectFill" class="xgtj-img"></image>
							<view class="fs12 font-weight color3 xgtj-name">可莱思迪客 英国冰 淇淋125ml</view>
							<view class="clear-both">
								<text class="fs16 colorm">¥99</text>
								<text class="fs14 color9">/组</text>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- <view class="yhpj bbt">
			<view class="yhpj-title clear-both">
				<view class="fs18 color3 font-weight float-l">用户评价</view>
				<view class="float-r"><text class="vertical fs14 color9 ">90%满意</text><image src="http://iph.href.lu/10x10" mode="aspectFill" class="vertical yhpj-title-img"></image></view>
			</view>
			<view class="yhpj-d">
				<view class="yhpj-item">
					<text class="fs14 color3 font-weight">大白兔：</text>
					<text class="fs14 color9">味道不输哈根达斯</text>
				</view>
				<view class="yhpj-item">
					<text class="fs14 color3 font-weight">爱在西元前：</text>
					<text class="fs14 color9">这个夏天就靠它解暑了</text>
				</view>
				<view class="yhpj-item">
					<text class="fs14 color3 font-weight">低头看鱼：</text>
					<text class="fs14 color9">第一次吃这个牌子的冰淇淋，奶味很浓郁， 也不是特别甜，适合减肥人士</text>
				</view>
			</view>
		</view> -->
			<view class="spjs" v-show="commodityObjectItem.Contents">
				<!-- <image src="../../static/tabbar/detail/spjs.png" mode="aspectFill" class="spjs-title"></image> -->
				<u-parse :content="commodityObjectItem.Contents" @imageProp="imageProp" @loading="loading" />
			</view>
			<view class="hxjg">
				<view class="hxjg-item">
					<view class="fs14 color3 font-weight hxjg-title">未划线价格</view>
					<view class="fs12 color6">商品的实时标价，不因表述的差异改变性质。具体成交价格根据商品参加活动，或会员使用优惠券、积分等发生变化，最终以订单结算页价格为准。</view>
				</view>
				<view class="hxjg-item">
					<view class="fs14 color3 font-weight hxjg-title">划线价格</view>
					<view class="fs12 color6">商品的专柜价、吊牌价、正品零售价、厂商指导价或该商品的曾 经展示过的销售价等，并非原价，仅供参考。</view>
				</view>
				<view class="hxjg-item mb0">
					<view class="fs14 color3 font-weight hxjg-title">配送规则</view>
					<view class="fs12 color6">{{deliverRule}}</view>
				</view>
			</view>
			<view class="bigview clear-both">
				<view class="shopcar_btns float-l text-center" @tap="goHref('/pages/tabBar/cart')">
					<image src="/static/tabbar/index/publish2.png" mode="aspectFill" class="shopcar_btn_img"></image>
					<view class="fs14 color9">购物车</view>
					<view class="dot fs12 text-over">{{cartNum}}</view>
				</view>
				<view class="add_btn colorf fs18 font-weight float-r" @tap="openCartBox(commodityObjectItem)">加入购物车</view>
			</view>
			<navigator url="/pages/tabBar/index" open-type="switchTab">
				<view class="shopcar_btn">
					<image src="/static/tabbar/index/homepage.png" mode="aspectFill" class="publish_fill"></image>
				</view>
			</navigator>

		</view>
		<!--购物车弹窗-->
		<view class="main" v-show="showCartBox">
			<view class="white-box">
				<view class="" v-for="(box,idx) in packagelist" :key="idx" v-show="box.PackageName==choosepackname">
					<image src="/static/tabbar/index/close.png" mode="aspectFill" class="colose-img" @tap="closeCartBox"></image>
					<view class="headers clear-both">
						<image :src="box.ImageUrl" mode="aspectFill" class="float-l cake-imgs"></image>
						<view class="float-l cakeinfos">
							<text class="fs20 colorm font-weight">¥{{box.DiscountPrice||box.UnitPrice}}</text><text class="fs14 color9">/{{box.Size}}</text>
							<view class="fs16 color3 font-weight cake-names"><text>{{box.CommodityName}}</text></view>
							<view class="fs14">
								<text class="colorFF6">已选择：</text>
								<text class="color6">{{box.PackageName}}</text>
							</view>
						</view>
					</view>
					<view class="guiges clear-both">
						<view class="fs16 font-weight color3">规格</view>
						<view class="fs12 items float-l" v-for="(s,index) in box.PackageNameList" :key="index" :class="{'chooses':s==choosepackname}"
						 @tap="chooseCartBox(s)">{{s}}</view>
					</view>
					<view class="nums clear-both">
						<view class="float-l fs16 font-weight color3">数量</view>
						<view class="float-r clear-both">
							<view class="float-l fs20 color6 optionss" @tap="updateCartNum(box,-1)">-</view>
							<view class="float-l fs14 color3 numss">{{box.Num}}</view>
							<view class="float-l fs20 colorFF6 optionss options2s" @tap="updateCartNum(box,1)">+</view>
						</view>
					</view>

					<view class="dones fs18 font-weight nodones" @tap="addTocart(box)">加入购物车</view>


				</view>
			</view>
		</view>
	</view>
</template>

<script src="../../api/detail/index.js">
</script>

<style lang="scss" scoped="true">
	.content {
		padding-bottom: 13.8667vw;

		.swiper {
			width: 100%;
			height: 85.1334vw;

			.swiper-img {
				width: 100%;
				height: 100%;
			}
		}

		.bbt {
			border-bottom: 2.667vw solid #fafafa;
		}

		.header {
			height: 15vw;
			line-height: 14vw;

			.header-l {
				margin-left: 4.2667vw;
			}

			.fex {
				margin-right: 4.2667vw;
				line-height: 6vw;
				background-color: #fff;
				padding: 0;
			}

			.fex::after {
				border: none;
				outline: none;
			}

			.header-img {
				width: 7.4667vw;
				height: 7.4667vw;
				display: block;
			}
		}

		.cake-name {
			margin: 0 4.2667vw 1.334vw 4.2667vw;

			.ml {
				margin-left: -2vw;
			}
		}

		.cake-info {
			margin: 0 4.2667vw 4.8vw 4.2667vw;
		}

		.cake-ly {
			margin: 0 4.2667vw 6.667vw 4.2667vw;
		}

		.yhfw {
			.yhfw-item {
				height: 13.8667vw;
				line-height: 13.8667vw;
				margin: 0 4.2667vw;
				border-bottom: 2upx solid #f2f2f2;

				.yhfw-tag {
					width: 10.667vw;
					text-align: center;
					height: 5.8667vw;
					line-height: 5.8667vw;
					margin-right: 2vw;
					border: 2upx solid #E5ECF5;
					border-radius: 1vw;
					margin-top: 4vw;
				}

				.yhfw-img {
					width: 4.2667vw;
					height: 4.2667vw;
					margin-top: 4.8vw;
				}
			}

			.bbn {
				border-bottom: none;
			}
		}

		.xgtj {
			.xgtj-title {
				height: 15.2vw;
				line-height: 15.2vw;
				margin: 0 4.2667vw;
			}

			.xgtj-swiper {
				height: 55vw;

				.xgtj-item {
					width: 28vw;
					display: inline-block;
					margin-left: 4vw;

					.xgtj-img {
						width: 100%;
						height: 28vw;
						display: block;
						margin-bottom: 1.8667vw;
					}

					.xgtj-name {
						height: 9vw;
						width: 100%;
						margin-bottom: 1vw;
					}
				}
			}

		}

		.yhpj {
			.yhpj-title {
				height: 15.2vw;
				line-height: 15.2vw;
				margin: 0 4.2667vw;

				.yhpj-title-img {
					width: 4.2667vw;
					height: 4.2667vw;
					margin-left: 1vw;
				}
			}

			.yhpj-d {
				margin: 0 4.2667vw 6.4vw 4.2667vw;
				padding-top: 3vw;
				padding-bottom: 1vw;
				background: #fafafa;
				border-radius: 2vw;

				.yhpj-item {
					margin-left: 3.2vw;
					margin-bottom: 2vw;
				}
			}
		}

		.spjs {
			padding: 3.4667vw 4.2667vw 6.1334vw 4.2667vw;

			.spjs-title {
				width: 100%;
				height: 14.4vw;
				display: block;
			}

			.spjs-img {
				width: 100%;
				height: 56.2667vw;
				display: block;
			}
		}

		.hxjg {
			padding: 3.4667vw 4.2667vw 6.1334vw 4.2667vw;

			.hxjg-item {
				margin-bottom: 5.0667vw;

				.hxjg-title {
					margin-bottom: .5vw;
				}
			}

			.mb0 {
				margin-bottom: 0;
			}
		}

		.bigview {
			width: 100%;
			height: 13.8667vw;
			text-align: center;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 9;

			.shopcar_btns {
				width: 20vw;
				background: #fff;
				height: 13.8667vw;
				position: relative;

				.shopcar_btn_img {
					width: 8vw;
					height: 8vw;
					display: block;
					margin: 0 auto;
					margin-top: 1vw;
					margin-bottom: -1vw;
				}

				.dot {
					background: #CC2825;
					color: #fff;
					position: absolute;
					width: 5vw;
					height: 5vw;
					text-align: center;
					line-height: 5vw;
					right: 4vw;
					top: 0;
					border-radius: 50%;
					z-index: 2;
				}
			}

			.add_btn {
				width: 80vw;
				height: 13.8667vw;
				line-height: 13.8667vw;
				background: #00449F;
			}
		}


		.shopcar_btn {
			width: 10.667vw;
			height: 10.667vw;
			border-radius: 50%;
			position: fixed;
			right: 4.2667vw;
			bottom: 20vw;
			z-index: 11;
			box-shadow: 0 4upx 8upx 0 rgba(0, 68, 159, 0.33);
			background: #00449F;


			.publish_fill {
				width: 6.667vw;
				height: 6.667vw;
				display: block;
				margin: 2vw auto;
			}
		}

		.main {
			width: 100%;
			height: 100%;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 10;
			background: rgba(0, 0, 0, 0.5);

			.white-box {
				min-height: 107vw;
				background: #fff;
				width: 100%;
				position: absolute;
				left: 0;
				bottom: 0;
				border-top-left-radius: 4.2667vw;
				border-top-right-radius: 4.2667vw;
				overflow: hidden;
				padding-bottom: 13.8667vw;
				animation: height .4s;

				.colose-img {
					position: absolute;
					width: 5.8667vw;
					height: 5.8667vw;
					right: 4.2667vw;
					top: 4.2667vw;
					z-index: 10;
				}

				.headers {
					height: 26.667vw;
					margin: 0 4.2667vw;
					padding: 5.334vw 0;
					border-bottom: 2upx solid #f2f2f2;

					.cake-names {
						margin: 1vw 0;
					}

					.cake-imgs {
						height: 26.667vw;
						width: 26.667vw;
						margin-right: 3vw;
					}

					.cakeinfos {
						height: 26.667vw;
						width: 61.6vw;
					}
				}

				.guiges {
					margin: 0 4.2667vw;
					padding: 5.334vw 0;
					border-bottom: 2upx solid #f2f2f2;

					.items {
						height: 7.4667vw;
						line-height: 7.4667vw;
						border-radius: 3.7334vw;
						background: #f2f2f2;
						color: #666;
						padding: 0 4.8vw;
						margin-top: 3.2vw;
						margin-right: 2.1334vw;
					}

					.chooses {
						background: #E5ECF5;
						color: #00449F;
					}

					.unchooses {
						color: #BCBCBC;
					}
				}

				.nums {
					height: 6.4vw;
					margin: 4vw 4.2667vw 8.5334vw 4.2667vw;
					line-height: 6.4vw;

					.optionss {
						width: 6.4vw;
						height: 6.4vw;
						border: 2upx solid #e7e7e7;
						text-align: center;
						border-top-left-radius: .8vw;
						border-bottom-left-radius: .8vw;
					}

					.options2s {
						border-radius: 0;
						border-top-right-radius: .8vw;
						border-bottom-right-radius: .8vw;
					}

					.numss {
						width: 10.667vw;
						text-align: center;
						border-top: 2upx solid #e7e7e7;
						border-bottom: 2upx solid #e7e7e7;
						height: 6.4vw;
						line-height: 6.4vw;
					}
				}

				.dones {
					height: 13.8667vw;
					line-height: 13.8667vw;
					text-align: center;
					width: 100%;
					color: #fff;
					background: #00449F;
					position: absolute;
					bottom: 0;
					left: 0;
				}

				.nodones {
					color: rgba(255, 255, 255, 1);
				}
			}
		}

		@keyframes height {
			from {
				bottom: -100%;
			}

			to {
				bottom: 0;
			}
		}
	}
</style>
